<template>
	<view class="studcontent">
		<view class="topsearch">
			<u-row gutter="16">
				<u-col @click="cityclick" span="4">
					<u-row gutter="16">
						<u-col span="2">
							<u-icon name="map" color="#2979ff" size="20"></u-icon>
						</u-col>
						<u-col span="10" style="color: 2979ff;">
							{{LocationInfo}}
						</u-col>
					</u-row>
				</u-col>
				<u-col span="8">
					<u-search @search='search' @custom='search' placeholder="请输入研学机构名称" v-model="deptName" @clear='clear'
					:show-action="true" action-text="搜索" :animation="true" bg-color='#red'
						shape='round'></u-search>
				</u-col>
		<uni-data-picker  ref="picker" v-model="LocationInfo" :map="{text:'name',value:'code'}" :localdata="itemsmap" popup-title="请选择城市" @change="onchange"
			@nodeclick="onnodeclick"></uni-data-picker>
		</uni-data-picker>
			</u-row>
		</view>
		<view class="">
			<u-empty v-if="List==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<view v-else v-for="(item,index) in List" :key="index" class="studheader">
					<navigator :url="'/pages/Studyabroad/index?deptId={{item.deptId}}'" hover-class="navigator-hover">
					<u-row gutter="16">
						<u-col span="11">
							<view class="studheadertitle">
								<span>{{item.deptName}}</span>
								<!-- <image class="Historyboximage" src="../../static/images/home/箭头 (1) 拷贝 2@2x.png"
									mode="">
								</image> -->
							</view>
							<view class="studheadertitle1">{{item.organName}}</view>
							<view class="studheadertitle2">{{item.deptDesc}}</view>
						</u-col>
					</u-row>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getwxListCity
	} from '../../api/login.js'
	import city from '../../utils/city.JSON'
	export default {
		data() {
			return {
				itemsmap: city,
				LocationInfo: '定位中',
				adcode: '',
				List: [],
				info:{
					cityCode:'',
					deptName:''
				},
				infoadcode:"",
				deptName:''

			}
		},
		mounted() {
			this.getLocation()
		},
		methods: {
			onchange(e) {
				this.LocationInfo = e.detail.value
				const lastItem = e.detail.value.pop()
				this.LocationInfo=lastItem.text
				this.infoadcode=lastItem.value
				uni.showLoading({title: '查询中'});
				this.instlist()
			},
			onnodeclick(node) {},
			search(e){
				uni.showLoading({title: '查询中'});
				this.instlist()
			},
			async clear() {
				this.info.activityTitle = ''
				this.info = {
					cityCode: this.infoadcode, 
					deptName: '' 
				}
				await getwxListCity(this.info).then(res => {
					uni.hideLoading();
					this.List = res.data
				})
			},
			cityclick(){
				this.$refs.picker.show()
			},
			// 地理逆编码解析
			getLocation() {
				uni.showLoading({
					title: '加载中'
				});
				var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
				// 实例化API核心类
				var qqmapsdk = new QQMapWX({
					key: '274BZ-DOEWW-ES6RD-R6ONG-4WEGJ-RCFQD' // 必填
				});
				const _this = this
				uni.getLocation({
					type: 'gcj02', //返回可用于uni.openLocation的经纬度
					success: function(res) {
						//逆地址解析  坐标转地址信息
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								_this.LocationInfo = res.result.address_component.province
								_this.infoadcode = res.result.ad_info.adcode
								_this.instlist()

							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								// console.log(res);
							}
						});
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			async instlist() {
				this.info = {
					cityCode: this.infoadcode, // 城市编码
					deptName: this.deptName // 机构名称
				}
				// 研学机构
				await getwxListCity(this.info).then(res => {
					uni.hideLoading();
					this.List = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.studcontent {
		width: 100%;
		height: 100vh;

		overflow: auto;
		background-color: #F5F8FA;
	}

	.topsearch /deep/.u-row {
		height: 69rpx;
		line-height: 69rpx;
		overflow: hidden;
		margin-right: 0 !important;
	}

	.topsearch {
		width: 93%;
		background-color: #fff;
		border-radius: 35rpx;
		margin: 3%;
		padding-left:1%;

	}

	.u-search {
		background-color: #fff;
		border-radius: 35rpx;
	}

	.studheader {
		width: 90%;
		background: #fff;
		overflow: hidden;
		padding: 5%;
		margin-bottom: 15rpx;
	}

	.studheaderimg {
		width: 158rpx;
		height: 219rpx;
		border-radius: 7rpx;
	}

	.studheadertitle {
		font-size: 31rpx;
		color: #333333;
		line-height: 33rpx;
		font-weight: bold;
		position: relative;
	}

	.studheadertitle1 {
		font-size: 25rpx;
		color: #000000;
		line-height: 58rpx;
	}

	.studheadertitle2 {
		font-size: 22rpx;
		color: #999999;
		line-height: 26rpx;
	}

	.Historyboximage {
		width: 15rpx;
		height: 26rpx;
		position: absolute;
		top: 4rpx;
		left: 130rpx;
	}
</style>